<template>
  <div>
  <el-table>
    :data="tableData"  <!--v-bind进行缩写简写-->
    border
    style="width: 100%">
    <el-table-column
      prop="id"
      label="编号"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="phone"
      label="电话"
      width="180">
    </el-table-column>
    <el-table-column
      prop="email"
      label="邮箱"
      width="180">
    </el-table-column>
    <el-table-column
      prop="createTime"
      label="创建时间"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址" >
    </el-table-column>
  </el-table>
  <el-pagination
    :page-size="pageSize"
    :current-page="currentPage"
    layout="prev, pager, next"
    align="right"
    :total="totals"
    @current-change="gotopage">//事件
  </el-pagination>
  </div>
</template>

<script>
import axios from "axios";
export default {//导出默认数据
  data () {
    return {
      //定义下面函数
  //返回四个值
      pageSize:5,  //页面大小
      currentPage:1,//当前页
      totals:0,  //条数是几条
      tableData:[] //这个是表格返回的数据,表格返回的数据用集合来表示
    }
  },
  methods:{//多个方法  //点击的时候去调
    gotopage(curr){ //写一个gotopage的方法并且形参填写为curr
      this.currentPage=curr;  //this指代当前的对象
      //这我在调用后端的接口
      this.page()
    },
    //这写个page的方法    //抽取方法命名为page
    page(){
      //1.先写axiou
      //2.mock 我们在写mock获取模拟接口
      //这填写url的路径以及方法是什么， 以及指定当前的当前页以及页面大小页数
      this.$http.post("/user/list",{"currentPage":this.currentPage,"pageSize":this.pageSize})
      .then(result=>{//填写指向函数
        this.tableData=result.data.rows//指定当前表格的返回数据
        this.totals=result.data.totals//指定当前的调试
      })
      .catch(result=>{
        alert("你错误了")
      })
    }
  },
  mounted() {//钩子函数并且调用接口  //页面初始化的时候去调用
    this.page()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style >

</style>
